<template>
	<view class="user-home-page">
		<view v-if="CurrentClient === 0">
			<!-- 会员首页 -->
			<u-navbar leftIconSize="0" :placeholder="false" bgColor="rgba(255,255,255,0)">
				<view slot="center">
					<text class="c-333 pf-sc fw-500" style="font-size: 34rpx;">车净净上门洗车</text>
				</view>
			</u-navbar>
			<!-- bg -->
			<view
				class="authentication-container w-750 b-box po-re"
				style="z-index: 12;background-color: rgba(255,255,255,0);"
				:style="{ height: containerHeight }"
			>
				<view
					class="bg po-re"
					style="top:0;left: 0;right: 0;width: 750rpx;height: 652rpx;z-index: 1;background-color: rgba(255,255,255,0);"
				>
					<image
						:src="require('@/static/usermodel/bg.png')"
						style="width: 750rpx;height: 652rpx;"
					></image>
				</view>
				<!-- -->
				<view
					class="w-100 b-box po-ab"
					:style="{ height: userContainer, top: containerTop }"
					style="z-index: 11;"
				>
					<scroll-view scroll-y="true" :style="{ height: userContainer }">
						<view>
							<view class="w-100 b-box d-flex flex-r ali-i-e just-ev" style="height: 160rpx;">
								<view
									class="d-flex flex-c ali-i-c just-c"
									style="height: 114rpx;"
									@click="GoInsurance(0)"
								>
									<image
										:src="require('@/static/usermodel/icon1.png')"
										style="width: 66rpx;height: 56rpx;margin-bottom: 18rpx;"
									></image>
									<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">
										上门洗车
									</text>
								</view>
								<view
									class="d-flex flex-c ali-i-c just-c"
									style="height: 114rpx;"
									@click="GoInsurance(1)"
								>
									<image
										:src="require('@/static/usermodel/icon2.png')"
										style="width: 55rpx;height: 66rpx;margin-bottom: 14rpx;"
									></image>
									<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">保险</text>
								</view>
								<view
									class="d-flex flex-c ali-i-c just-c"
									style="height: 114rpx;"
									@click="GoInsurance(2)"
								>
									<image
										:src="require('@/static/usermodel/icon3.png')"
										style="width: 60rpx;height: 60rpx;margin-bottom: 16rpx;"
									></image>
									<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">年审</text>
								</view>
								<view
									class="d-flex flex-c ali-i-c just-c"
									style="height: 114rpx;"
									@click="GoInsurance(3)"
								>
									<image
										:src="require('@/static/usermodel/icon4.png')"
										style="width: 57rpx;height: 54rpx;margin-bottom: 20rpx;"
									></image>
									<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">
										汽车用品
									</text>
								</view>
							</view>
							<!-- empty -->
							<view class="w-750 b-box" :style="{ height: emptyHeight }"></view>
							<!-- box -->
							<view
								class="w-750 b-box bg-fa"
								style="border-top-left-radius:4rpx ;border-top-right-radius: 4rpx;overflow: hidden"
							>
								<!-- 1 金刚区-->
								<view v-if="indextoplist.catlist" class="box">
									<view
										v-for="(itm, index) in indextoplist.catlist.slice(0, 4)"
										:key="index"
										@click="SubmitOrder(itm.image, itm.name, itm.price, itm.id)"
									>
										<image :src="itm.image"></image>
										<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">
											{{ itm.name }}
										</text>
									</view>
								</view>

								<!-- 商品区域   gcatlist-->
								<view v-if="indextoplist.gcatlist" class="box">
									<view
										v-for="(itm, index) in indextoplist.gcatlist.slice(0, 4)"
										:key="index"
										@click="goAutomobile(index)"
									>
										<image :src="itm.image"></image>
										<text class="fw-400 pf-sc" style="font-size: 28rpx;color: #26387C;">
											{{ itm.name }}
										</text>
									</view>
								</view>

								<!--2  -->
								<view
									class="d-flex flex-r ali-i-c just-c w-750 b-box"
									v-if="indextoplist.announcement"
								>
									<view
										style="width: 702rpx;height: 88rpx;border-radius: 8rpx;overflow:hidden;position: relative;"
									>
										<u-notice-bar
											speed="50"
											fontSize="30rpx"
											linkType="navigateTo"
											url="/userModelA/userA/Massage/Massage?Index=${index}"
											:customStyle="{
												fontWeight: '400',
												fontFamily: ' PingFang SC-Regular, PingFang SC'
											}"
											color="#FF652C"
											bgColor="rgba(255,101,44,0.0800)"
											:text="indextoplist.announcement[0].announcement"
										></u-notice-bar>
										<view
											style="width: 50rpx;height: 50rpx;line-height: 50rpx;text-align: center;border-radius: 50%;background-color: #FF652C;color: #fff;position: absolute;top: 14rpx;right: 12rpx;font-size: 24rpx;"
											v-if="xxnum > 0"
										>
											{{ xxnum }}
										</view>
									</view>
								</view>
								<!-- 3-->
								<view
									class="d-flex flex-r ali-i-c just-c w-750 b-box bg-fa"
									style="padding: 24rpx 0rpx 12rpx;"
								>
									<text class="fw-500 c-000 pf-sc" style="font-size: 30rpx;">洗车视频</text>
								</view>
								<!-- 4 -->
								<view
									style="padding-bottom: 20rpx;"
									class="bg-fa w-750 b-box d-flex flex-r ali-i-c just-c"
									v-if="indextoplist.carvideo"
								>
									<view style="width: 690rpx;border-radius: 16rpx;overflow: hidden;">
										<u-swiper
											:list="indextoplist.carvideo"
											keyName="car_image"
											:autoplay="false"
											height="396rpx"
										></u-swiper>
									</view>
								</view>
								<!-- 5 -->
								<view
									class="w-750 b-box d-flex flex-r ali-i-c just-c bg-fa"
									style="height: 221rpx;margin-bottom: 22rpx;"
									@click="GoInvitation"
								>
									<image
										:src="require('@/static/usermodel/yq.png')"
										style="width: 702rpx;height: 221rpx;"
									></image>
								</view>
								<!-- 6 -->
								<view class="w-750 b-box bg-ff" style="height: 400rpx;border-radius: 12rpx;">
									<view
										class="w-100 b-box d-flex flex-r ali-i-c just-sw"
										style="padding: 28rpx 28rpx 16rpx 32rpx;"
									>
										<text class="pf-sc fw-500 c-000" style="font-size: 32rpx;">会员卡</text>
										<text class="pf-sc fw-400 " style="font-size: 24rpx;color: #666666;">
											办卡可享受更多优惠
										</text>
									</view>
									<!--  -->
									<view
										v-if="indextoplist.vip"
										class="w-100 b-box d-flex flex-r ali-i-c just-sw"
										style="padding: 0 14rpx 0rpx 12rpx;"
									>
										<view
											v-for="(item, index) in indextoplist.vip"
											:key="index"
											class="po-re d-flex flex-c ali-i-c just-sw"
											@click="GoBuyMember(item.id)"
											style="width: 700rpx;height: 292rpx;border-radius: 8rpx;overflow: hidden;"
										>
											<image
												:src="require('@/static/jrjsk.png')"
												style="width: 700rpx;height: 292rpx;top:0;right: 0;left:0;z-index: 1;"
												class="po-ab"
											></image>

											<view
												class="w-100 po-re d-flex flex-c just-c"
												style="flex: 1;z-index: 10;top:10rpx;margin-left: 104rpx;"
											>
												<view class="d-flex flex-r ali-i-c just-s">
													<text
														class="pf-sc fw-600 po-re"
														style="font-size: 30rpx;color: #EBB68E;top:2rpx;margin-right: 14rpx;"
													>
														¥
													</text>
													<text class="pf-sc fw-600" style="font-size: 48rpx;color: #EBB68E;">
														{{ item.money }}
													</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view style="height: 40rpx;" class="w-750 b-box bg-fa"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!--  -->

				<template>
					<u-overlay :show="showCenter">
						<view
							style="display: flex;justify-content: center;align-items: center;flex-direction: column;position: fixed;top: 45%;left: 50%;transform: translate(-50%,-50%);"
						>
							<image
								:src="require('../../static/indexcenter.png')"
								mode="widthFix"
								@click="
									goXiChe(
										xicheCenter[0].image,
										xicheCenter[0].name,
										xicheCenter[0].price,
										xicheCenter[0].id
									)
								"
							></image>
							<view style="margin-top: 20rpx;border: 4rpx solid #c6d1d9;border-radius: 50%;">
								<u-icon @click="cha" name="close" color="#c6d1d9" size="48"></u-icon>
							</view>
						</view>
					</u-overlay>
				</template>
			</view>
			<contact-customer-service
				ref="customModel"
				:show="UModelShow"
				:top="'30rpx'"
				:confirmText="UconfirmText"
				:success="UModelStatus"
				:cancelText="UcancelText"
				:height="Uheight"
				:Cancelcolor="UCancelcolor"
				:color="Ucolor"
				:userName="UuserName"
				:showCloseIcon="UshowCloseIcon"
				@cancel="UModelCancel"
				@confirm="UModelConfirm"
				:title="UModelTitle"
			/>
		</view>

		<!-- 师傅首页 -->
		<view class="staff-home-page" v-if="CurrentClient === 1">
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
				<view slot="center">
					<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">车净净师傅端</text>
				</view>
			</u-navbar>
			<view
				class="d-flex flex-r ali-i-c just-s activeDom"
				slot="left"
				style="margin-left: 40rpx;display: flex;align-items: center;"
				@click="RefrePosition"
			>
				<image
					:src="require('@/static/icon/refre.png')"
					id="imgurls"
					style="width: 28rpx;height: 28rpx;margin-right: 6rpx;vertical-align: middle;margin-bottom: 3rpx;"
				></image>
				<text class=" pf-sc fw-500" style="font-size: 28rpx;color:#26387C;">{{ selecAdress }}</text>
			</view>
			<view class="authentication-container w-750 b-box  po-re">
				<view class="d-flex flex-r ali-i-c just-c w-750 b-box bg-ff" style="height: 92rpx;">
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="36rpx"
						:lineBottom="'12rpx'"
						:itemStyle="{
							height: '88rpx',
							width: '165rpx',
							backgroundColor: 'rgba(255,255,255,0)'
						}"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
				</view>
				<!-- list -->
				<!-- swiper tabs标签 -->
				<view>
					<view class=" d-flex flex-c just-s ali-i-c listcards">
						<view class="listcard" v-if="dataList.length > 0">
							<staff-list-card
								@GrabOrders="GrabOrders"
								@Refuse="Refuse"
								v-for="(item, index) of dataList"
								:key="index"
								:staffList="item"
								:TabCurrent="TabCurrent"
							/>
						</view>
						<!-- 空状态 -->
						<view
							class=" d-flex flex-c ali-i-c just-c"
							:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
							v-else
						>
							<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
								数据为空
							</text>
						</view>
					</view>
					<custom-model
						ref="customModel"
						:show="ModelShow"
						:top="'30rpx'"
						:confirmText="confirmText"
						:success="ModelStatus"
						:cancelText="cancelText"
						:height="height"
						:width="width"
						:borderColor="borderColor"
						:color="color"
						:showCloseIcon="showCloseIcon"
						@cancel="ModelCancel"
						@ModelCancel="ModelCancel"
						@confirm="ModelConfirm"
						:title="ModelTitle"
					/>
				</view>
				<!-- 师傅 -->
			</view>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk';
import amap from '@/common/amap-wx.js';
import {
	orderlists,
	getuserindex,
	kefu,
	doworkerorder,
	newslist,
	usercenter,
	mycenter,
	updateuserloaction,
	gettixing
} from '@/common/api.js';
import contactCustomerService from '@/components/contact-customer-service/contact-customer-service';
import staffListCard from '@/components/staff-list-card/staff-list-card.vue';
import {
	_tabContainerHeight,
	_screenHeight,
	_tabHeight,
	_addUnit,
	_rpxTpx,
	_navHeight,
	_statusBarHeight
} from '@/utils/GetSys.js';
import { watch } from 'vue';
export default {
	components: {
		'staff-list-card': staffListCard,
		'contact-customer-service': contactCustomerService
	},
	data() {
		return {
			xicheCenter: [],
			showCenter: uni.getStorageSync('showCenter'),
			xxnum: '',
			userId: uni.getStorageSync('user').id,
			list1: uni.getStorageSync('list1'), //指定语音
			list2: uni.getStorageSync('list2'), //大厅语音
			birthday: '选择服务时间',
			selecAdress: '',
			amapPlugin: null,
			key: '25d8a43c8ee55f7c0e6dfb815fdff544',
			id: '', //拒绝接单的订单id
			CurrentClient: uni.getStorageSync('CurrentClient'), //0:用户；1：师傅
			containerHeight: '',
			indextoplist: [],
			phone: '',
			/////////////////用户端/////////////////////
			containerTop: '',
			userContainer: '',
			emptyHeight: '',
			// 模态框
			UModelShow: false,
			UModelStatus: false, //客服
			UModelTitle: '',
			UconfirmText: '',
			UcancelText: '',
			Ucolor: '',
			Uheight: '',
			UuserName: '',
			UshowCloseIcon: '',
			UCancelcolor: '',
			/////////////////用户端/////////////////////
			// ///////////师傅//////////////////////
			//模态框
			ModelShow: false,
			ModelStatus: false, //danger
			ModelTitle: '',
			confirmText: '',
			cancelText: '',
			borderColor: '',
			color: '',
			height: '',
			width: '',
			showCloseIcon: '',
			OrderStatus: false, //点击拒接后模态框确认按钮状态；
			//模态框
			listHeight: '',
			TabList: [
				{
					id: 0,
					name: '抢单大厅'
				},
				{
					id: 1,
					name: '系统分配'
				},
				{
					id: 2,
					name: '用户指定'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			dataList: [],
			page: 1,
			newsLists: [],
			bili: '',
			csnum: 1

			// ///////////师傅//////////////////////
		};
	},

	onLoad() {
		uni.setStorageSync('showCenter',true)
		wx.onAppShow(()=>{
			this.showCenter=true
			uni.setStorageSync('showCenter',true)
		})
		if (this.CurrentClient === 1) {
			this.getWorkcenter();
		}
		if (this.CurrentClient === 0) {
			this.getUser();
		}
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		this.getMap();
	},

	onShow() {
		if (this.CurrentClient === 1) {
			console.log('执行师傅端');
			this.getWorkcenter();
			this.tabsClick();
			this.getMap();
			this.getYuyin();
			this.updateLocation();
			setInterval(() => {
				this.getYuyin();
			}, 10000);
		}
		if (this.CurrentClient === 0) {
			//用户端
			console.log('执行用户端');
			let Tbabar2 = getApp().globalData.status;
			if (Tbabar2) {
				//如果为True即是从tabbar客服返回，开启模态框
				getApp().globalData.status = false; //重置模态框状态
				this.UContact(); //开启模态框
			}
			this.getindexcont();
			this.getUser();
			this.getMap();
			this.updateLocation();
			setTimeout(() => {
				this.getNewLists();
			}, 2000);
		}
		this.containerHeight = _addUnit(_screenHeight() - _tabHeight(), 'px');
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('98rpx'), 'px');
		this.containerTop = _addUnit(_navHeight() + _statusBarHeight(), 'px');
		this.userContainer = _addUnit(
			_screenHeight() - _navHeight() - _statusBarHeight() - _tabHeight(),
			'px'
		);

		this.emptyHeight = _addUnit(
			_rpxTpx('652rpx') - _statusBarHeight() - _navHeight() - _rpxTpx('160rpx'),
			'px'
		);
		this.CurrentClient = uni.getStorageSync('CurrentClient');
		// console.log('home', uni.getStorageSync('CurrentClient'));
		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			curPages.getTabBar().setData({
				selected: 0
			});
		}
	},

	onPullDownRefresh() {
		this.page = 1;
		this.tabsClick();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		// console.log('到底了');
		this.page = this.page++;
		this.tabsClick();
	},
	methods: {
		cha(){
			
			this.showCenter=false
			uni.setStorageSync('showCenter',false)
		},
		goXiChe(image, name, price, id) {
			if (uni.getStorageSync('userInfo').level != 0) {
				price = (price * this.bili).toFixed(2);
			} else {
				price = price;
			}
			//首页金刚区跳转
			uni.navigateTo({
				url: `/userModelA/userA/SubMitOrder/SubMitOrder?image=${image}&name=${name}&price=${price}&id=${id}`
			});
		this.showCenter=false
		uni.setStorageSync('showCenter',false)
		},
		//获取用户端的消息列表数据
		getNewLists() {

			if (this.xxnum > 0) {
				const innerAudioContext3 = uni.createInnerAudioContext();
				innerAudioContext3.autoplay = true;
				innerAudioContext3.obeyMuteSwitch = false;
				innerAudioContext3.src = 'https://www.chejingjing.cn/uploads/mp3/xxx.mp3';
				innerAudioContext3.onPlay(() => {});
				innerAudioContext3.onEnded(() => {});
				innerAudioContext3.onError(res => {
					// console.log(res.errMsg);
					// console.log(res.errCode);
				});
			}
		},

		//语音提醒 师傅
		getYuyin() {
			gettixing({ token: uni.getStorageSync('usertoken') }).then(res => {
				console.log(res.data.data.list1,'语音');
				uni.setStorageSync('list1', res.data.data.list1);
				uni.setStorageSync('list2', res.data.data.list2);
				if (uni.getStorageSync('list1').length > 0) {
					const innerAudioContext1 = uni.createInnerAudioContext();
					innerAudioContext1.autoplay = true;
					innerAudioContext1.obeyMuteSwitch = false;
					innerAudioContext1.src = 'https://www.chejingjing.cn/uploads/mp3/xdd.mp3';
					innerAudioContext1.onPlay(() => {});
					innerAudioContext1.onEnded(() => {
						uni.setStorageSync('list1', []);
					});
					innerAudioContext1.onError(res => {
						// console.log(res.errMsg);
						// console.log(res.errCode);
					});
				}

				if (uni.getStorageSync('list2').length > 0) {
					const innerAudioContext2 = uni.createInnerAudioContext();
					innerAudioContext2.autoplay = true;
					innerAudioContext2.obeyMuteSwitch = false;
					innerAudioContext2.src = 'https://www.chejingjing.cn/uploads/mp3/qddt.mp3';
					innerAudioContext2.onPlay(() => {});
					innerAudioContext2.onEnded(() => {
						uni.setStorageSync('list2', []);
					});
					innerAudioContext2.onError(res => {
						// console.log(res.errMsg);
						// console.log(res.errCode);
					});
				}
			});
		},
		//首页调取与喜师傅的个人信息
		getWorkcenter() {
			let params = {
				token: uni.getStorageSync('usertoken')
			};
			mycenter(params).then(res => {
				// console.log(res.data.data);
				if (res.data.code == 1) {
					this.CurrentClient = 1;
					uni.setStorageSync('workUser', res.data.data);
				}
			});
		},
		//首页再次调取一下用户的个人信息
		getUser() {
			//发送请求渲染用户的个人信息
			let params = {
				token: uni.getStorageSync('usertoken')
			};
			usercenter(params).then(res => {
				// console.log(res.data.data);
				if (res.data.code === 1) {
					this.userInfo = res.data.data;
					uni.setStorageSync('userInfo', res.data.data);
				} else {
					uni.clearStorage();
				}
			});
		},
		//获取地理位置
		getMap(index) {
			var that = this;
			var qqmapsdk;
			this.amapPlugin.getRegeo({
				success: data => {
					// console.log(data, '经纬度');
					that.selecAdress=data[0].name
					uni.hideLoading();
					that.long = data[0].longitude;
					that.lat = data[0].latitude;

					qqmapsdk = new QQMapWX({
						key: '662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV' //自己申请的key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: that.lat,
							longitude: that.long
						},
						success: addressRes => {
							that.selecAdress =
								// addressRes.result.address +
								addressRes.result.address_reference.landmark_l2.title;
							this.updateLocation();
						},
						fail(res) {}
					});
				}
			});
		},
		updateLocation() {
			if (uni.getStorageSync('CurrentClient') == 1) {
				let id = uni.getStorageSync('user').id;
				updateuserloaction({ id, lon: this.long, lat: this.lat }).then(res => {
					// console.log(res, '更新位置');
				});
			} else {
				let id = uni.getStorageSync('userCent').id;
				updateuserloaction({ id, lon: this.long, lat: this.lat }).then(res => {
					// console.log(res, '更新定位');
					if (res.data.code == 1) {
						return 1;
					} else {
						return uni.showToast({
							title: '位置更新失败',
							icon: 'none'
						});
					}
				});
			}
		},
		// ///////////用户端开始///////////////////
		getindexcont() {
			getuserindex({ userid: uni.getStorageSync('userCent').id })
				.then(res => {
					if (res.data.code === 1) {
						this.indextoplist = res.data.data;
						this.xxnum = res.data.data.nums;
						this.bili = res.data.data.vip[0].bili / 100;
						uni.setStorageSync('bili', res.data.data.vip[0].bili / 100);
						let xiche = this.indextoplist.catlist.filter(item => {
							return item.id == 24;
						});
						this.xicheCenter = xiche;
					}
				})
				.catch(err => {});
		},

		GoInsurance(index) {
			//首页顶部四个按钮跳转
			switch (index) {
				case 0: //上门洗车
					uni.navigateTo({
						url: '/userModelA/userC/SubTreeSelect/SubTreeSelect'
					});
					break;
				case 1: //保险
					uni.navigateTo({
						url: '/userModelA/userA/Insurance/Insurance'
					});
					break;
				case 2: //年审
					uni.navigateTo({
						url: '/userModelA/userA/AnnualReview/AnnualReview'
					});
					break;
				case 3: //汽车用品
					uni.navigateTo({
						url: '/userModelA/userC/Automobile/Automobile'
					});
					break;
				default:
					break;
			}
		},
		goAutomobile(id) {
			uni.navigateTo({
				url: `/userModelA/userC/Automobile/Automobile?id=${id + 2}`
			});
		},
		SubmitOrder(image, name, price, id) {
			if (uni.getStorageSync('userInfo').level != 0) {
				price = (price * this.bili).toFixed(2);
			} else {
				price = price;
			}
			//首页金刚区跳转
			uni.navigateTo({
				url: `/userModelA/userA/SubMitOrder/SubMitOrder?image=${image}&name=${name}&price=${price}&id=${id}`
			});
		},
		GoInvitation() {
			//去邀请好友
			uni.navigateTo({
				url: `/userModelA/userA/Invitation/Invitation`
			});
		},
		GoBuyMember(id) {
			//VIP年卡
			uni.navigateTo({
				url: `/userModelA/userA/BuyMember/BuyMember?id=${id}`
			});
		},
		UContact() {
			kefu().then(res => {
				console.log(res.data.data);
				this.phone = res.data.data;
				this.UModelStatus = false; //客服
				this.UModelTitle = `客服电话：${this.phone}`;
				this.UconfirmText = '拨打客服电话';
				this.UcancelText = '取消';
				this.UCancelcolor = '#999999';
				this.Ucolor = '#FF5C00';
				this.Uheight = '110rpx';
				this.UuserName = '';
				this.UshowCloseIcon = false;
				this.UModelShow = true;
			});
			// 弹出客服联系电话模态框
		},
		UModelCancel() {
			//关闭模态框
			this.UModelShow = false;
		},
		UModelConfirm() {
			//模态框点击确认按钮
			this.UModelShow = false;
			uni.makePhoneCall({
				phoneNumber: `${this.phone}`,
				complete(e) {
					console.log(e);
				}
			});
		},
		// ///////////用户端结束///////////////////
		//用户端请求结束

		//师傅端开始请求
		// ///////////师傅端开始///////////////////
		onReachBottom() {
			this.page = this.page++;
			this.tabsClick();
		},

		//点击顶部导航栏渲染不同的数据
		tabsClick(item) {
			if (item) {
				this.page = 1;
				this.dataList = [];
				this.TabCurrent = item.id;
			}

			//加载不同的数据  border-1
			let params = {
				token: uni.getStorageSync('user').token,
				type: this.TabCurrent + 1,
				page: this.page++
			};
			orderlists(params).then(res => {
				var data = res.data;
				if (res.data.data.length > 0) {
					if (this.page == 1) {
						this.dataList = [];
						this.dataList = res.data.data;
					} else {
						this.dataList = this.dataList.concat(...res.data.data);
					}
				} else {
					if (this.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '暂无更多内容'
						});
						this.page = this.page - 1;
					}
				}
			});
		},
		RefrePosition() {
			//定位
			let flag = true;
			if (flag) {
				uni.showToast({
					title: '位置更新了',
					icon: 'none'
				});
				this.updateLocation();
				flag = false;
			}
		},

		Refuse(data) {
			//拒接
			this.id = data.id;
			this.ModelStatus = false;
			this.ModelTitle = '确认拒接接单?';
			this.height = '74rpx';
			this.width = '240rpx';
			this.borderColor = '2rpx solid #26387C';
			this.color = '#26387C';
			this.showCloseIcon = false;
			this.confirmText = '确认';
			this.cancelText = '取消';
			this.OrderStatus = true;
			this.ModelShow = true;
		},
		GrabOrders(data) {
			//师傅开始接单
			let params = {
				token: uni.getStorageSync('user').token,
				type: 1,
				id: data.id
			};
			doworkerorder(params).then(res => {
				// console.log(res);
				if (res.data.code === 1) {
					this.ModelStatus = true;
					this.ModelTitle = '接单成功';
					this.confirmText = '查看订单';
					this.borderColor = '2rpx solid #dddddd';
					this.color = '#333333';
					this.cancelText = '退出';
					this.height = '74rpx';
					this.width = '240rpx';
					this.OrderStatus = false;
					this.showCloseIcon = true;
					this.ModelShow = true;
				} else {
					return uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		ModelCancel(data) {
			if (this.cancelText == '退出') {
				this.ModelShow = false;
				this.dataList = [];
				this.page = 1;
				this.tabsClick();
			} else {
				this.ModelShow = false;
			}
		},
		ModelConfirm() {
			if (this.confirmText == '查看订单') {
				uni.switchTab({
					url: '/pages/CustomerService/CustomerService'
				});
				this.ModelShow = false;
				this.dataList = [];
				this.page = 1;
				this.tabsClick();
			} else {
				let params = {
					token: uni.getStorageSync('usertoken'),
					type: 2,
					id: this.id
				};
				doworkerorder(params).then(res => {
					if (res.data.code === 1) {
						this.ModelShow = false;
						uni.showToast({
							title: '你已成功拒绝',
							icon: 'success'
						});
					}
					this.dataList = [];
					this.page = 1;
					this.tabsClick();
				});
			}
		}
	}
};
</script>

<style lang="scss">
.user-home-page {
	.u-navbar--fixed {
		z-index: 30 !important;
	}

	.aa {
		white-space: nowrap !important;
		width: 750rpx;
		height: 196rpx;
	}

	.video-width {
		width: 308rpx;
		height: 196rpx;
	}

	.box {
		margin-top: 25rpx !important;
		margin-bottom: 20rpx !important;
		display: flex;
		width: 96% !important;
		margin: 0 auto;
		justify-content: space-between;
		overflow: scroll;
		text-align: center;
	}

	.box > view {
		width: 120rpx;
		margin-right: 50rpx;
	}

	.box > view:last-child {
		margin-right: 0;
	}

	.box > view > image {
		width: 100rpx;
		height: 100rpx;
		vertical-align: middle;
	}
	.listcards {
		.listcard:last-child {
			margin-bottom: 100rpx;
		}
	}
}
.activeDom:active {
	scale: 2;
}
.u-notice {
	width: 600rpx;
}
</style>
